<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/public.css">
  <link rel="stylesheet" href="./css/index.css">
  <style>
    .main{
        background: #ecc029;
    }
    .main .countdown{
        background: #fff;
    }
    .main .countdown span{
        color: #cb1a34;
    }
    .main .student{
        background: #fff;
    }
    .main .buy{
        background: #fff;
    }
    .main .title{
        color: #fff;
    }
    .main .buy .list li{
        background: #f7eedf;
    }
    .main .buy .list li .name span{
        color: #7f7f81;
    }
    .main .buy .list li .pay{
        color: #8b8786;
    }
    .main .buy .list li .pay span{
        color: #e20113;
    }
    .main .rank{
        background: #f6f6f6;
    }
    .main .rank .rank-list li{
        background: #fff;
    }
    .main .rank .rank-list li .one{
        color: #c9161c;
    }
    .main .rank .rank-list li .two{
        color: #d53324;
    }
    .main .rank .rank-list li .three{
        color: #994a2b;
    }
    .main .rank .rank-list li .four{
        color: #221715;
    }
    .main .rank .rank-list .name span{
        color: #6e6e6e;
    }
    .main .rank .rank-list .name span .money{
        color: #e30011;
    }
    .register .c{
        color: #ccc;
        background: #fff;
    }
    .register-form div p{
        color: #fff;
    }
    .register-form div input{
        border: 1px solid #3daada;
    }
    .register-form .submit{
        background: #f4d339;
        color: #a44723;
        box-shadow: 1px 2px #a44723;
    }
    .success .share{
        background: #f4d339;
        color: #a44723;
        box-shadow: 1px 2px #a44724;   
    }
    .share-con p{
        color: #fff;
    }
    .share-con .cut,.post .del{
        color: #fff;
        border-bottom: 1px solid #fff;
    }
    .post .post-con .post-main .post-title{
        background: #fff;
    }
    .post .post-con .post-main .post-code{
        background: #fff;
    }
    .post .post-con .post-main .post-code p{
        color:#654840;
    }
    .some .foot .person p{
        color: #fff;
    }
    .some .foot .rule{
        background:#38a637; 
    }
    .some .foot .apply{
        background:#f49f1a; 
    }
    .some .foot button{
        color: #fff;
    }
  </style>
</head>
<body>
<!-- head -->
    <div class="head">
        <img src="./images/1.png" alt="">
    </div>
<!-- head -->
<!-- main -->
    <div class="main">
        <div class="countdown">
             距离活动结束还有：<span id="count"><span class="viewtime-day"></span>天<span class="viewtime-hour"></span>时<span class="viewtime-minute"></span>分<span class="viewtime-second"></span>秒</span>
        </div>
        <div class="student">
            <p>已报学员</p>
            <ul class="clearfix">
                <li>
                    <img src="./images/2.png" alt="">
                </li>
                <li>
                    <img src="./images/2.png" alt="">
                </li>
                <li>
                    <img src="./images/2.png" alt="">
                </li>
                <li>
                    <img src="./images/2.png" alt="">
                </li>
                <li>
                    <img src="./images/2.png" alt="">
                </li>
            </ul>
            
        </div>
        <div class="buy">
            <div class="title">购买记录</div>
            <div class="clearfix">
                <p class="number fr">人数：68人</p>
            </div>
            <ul class="list">
                <li>
                    <img class="fl" src="./images/2.png" alt="">
                    <div class="name fl">
                        <p>香LouLou</p>
                        <span>10/26 12:26:21</span>
                    </div>
                    <p class="pay fr">已支付<span>39.98</span>元</p>
                </li>
                <li>
                    <img class="fl" src="./images/2.png" alt="">
                    <div class="name fl">
                        <p>Hbbb</p>
                        <span>10/26 12:26:21</span>
                    </div>
                    <p class="pay fr">已支付<span>39.98</span>元</p>
                </li>
                <li>
                    <img class="fl" src="./images/2.png" alt="">
                    <div class="name fl">
                        <p>匆匆过匆匆过匆匆过匆匆过</p>
                        <span>10/26 12:26:21</span>
                    </div>
                    <p class="pay fr">已支付<span>39.98</span>元</p>
                </li>
                <li>
                    <img class="fl" src="./images/2.png" alt="">
                    <div class="name fl">
                        <p>safe-</p>
                        <span>10/26 12:26:21</span>
                    </div>
                    <p class="pay fr">已支付<span>39.98</span>元</p>
                </li>
            </ul>
        </div> 
        <div class="rank">
            <div class="title">红包排行榜</div>
            <ul class="rank-list">
                <li>
                    <p class="num one fl">1</p>
                    <img class="fl" src="./images/2.png" alt="">
                    <div class="name fr">
                        <p>香LouLou</p>
                        <span>已获得红包<span class="money">88</span>元</span>
                    </div>
                </li>
                <li>
                    <p class="num two fl">2</p>
                    <img class="fl" src="./images/2.png" alt="">
                    <div class="name fr">
                        <p>Hbbb</p>
                        <span>已获得红包<span class="money">888</span>元</span>
                    </div>
                </li>
                <li>
                    <p class="num three fl">3</p>
                    <img class="fl" src="./images/2.png" alt="">
                    <div class="name fr">
                        <p>匆匆过匆匆过匆匆过匆匆过</p>
                        <span>已获得红包<span class="money">88</span>元</span>
                    </div>
                </li>
                <li>
                    <p class="num four fl">4</p>
                    <img class="fl" src="./images/2.png" alt="">
                    <div class="name fr">
                        <p>safe-</p>
                        <span>已获得红包<span class="money">88</span>元</span>
                    </div>
                </li>
            </ul>
        </div>
    <!-- live -->
        <div class="live">
            <img src="./images/live.png" alt="">
            <img src="./images/live.png" alt="">
            <img src="./images/live.png" alt="">
            <img src="./images/live.png" alt="">
        </div>
    <!-- live --> 
    </div>

<!-- main -->
<!-- register -->
    <div class="register">
        <span class="c">x</span>
        <form class="register-form" name="form" action="./index.html" method="post" id="form">
            <div class="name">
              <p>姓名</p>
              <input type="text" name="name" autocomplete="true">
            </div>
            <div class="phone">
              <p>电话</p>
              <input type="text" name="mobile" autocomplete="true">
            </div>
            <div class="course">
              <p>课程</p>
              <input type="text" name="course" autocomplete="true">
            </div>
            <button class="submit" type="submit" id="submit">提交</button>
        </form>
    </div>
<!-- register -->
<!-- success -->
    <div class="success" id="success">
        <button class="share">
            分享领好礼
        </button>
    </div>
<!-- success -->
<!-- share -->
    <div class="share-main">
        <img class="arrow" src="./images/share5.png" alt="">
        <div class="share-con">
            <img src="./images/share1.png" alt="">
            <p>——分享方式——</p>
            <div class="con-detail clearfix">
                <div class="friend fl">
                    <img src="./images/share3.png" alt="">
                    <p>微信好友</p>
                </div>
                <div class="space fr">
                    <img src="./images/share4.png" alt="">
                    <p>朋友圈</p>
                </div>

            </div>
            <p class="cut">取消</p>
            
        </div>
    </div>
<!-- share -->
<!-- post -->
    <div class="post">
        <div class="post-con">
            <div class="post-main">
                <div class="post-title clearfix">
                    <div class="user fl">
                        <img src="./images/2.png" alt="">
                        <p>1234512345</p>
                    </div>
                    <p class="title-con">
                        这个活动太优惠了，快来看看吧
                    </p>
                </div>
                <div class="post-code">
                    <p class="code-title">
                        轻盈画室，1028元精品课程，疯狂砍价只需99元
                    </p>
                    <img src="./images/post-code.png" alt="">
                    <span>长按识别二维码进入活动</span>
                </div>
            </div>

        </div>
        <p class="del">取消</p>
    </div>
<!-- post -->

<!-- some -->
    <div class="some">
        <div class="some-btn">
            <div class="btn-audio">
                <a href="javascript:;" class="music ">
                    <img class="btn-music active btn-ani" src="./images/3.png" alt="">
                    <img class="btn-music" src="./images/33.png" alt="">
                </a>
                <audio id="music" autoplay="autoplay" loop="loop">
                    <source src="" type="audio/mpeg" />
                </audio>
            </div>
            <a href="javascript:;" class="personal">
                <img src="./images/7.png" alt="">
            </a>
            <a href="./tousu/index.html" class="conplaint">
                <img src="./images/4.png" alt="">
            </a>
            <a href="javascript:;" class="share">
                <img src="./images/6.png" alt="">
            </a>
            <a href="tel:10086" class="contect">
                <img src="./images/5.png" alt="">
            </a>
            <a href="javascript:;" class="recommend">
                <img class=" recommend-ani" src="./images/8.png" alt="">
            </a>
        </div>
        <div class="foot clearfix">
            <div class="person">
                <img class="img-responsive" src="./images/2.png" alt="">
                <p>匆匆过</p>
            </div>
            <button class="rule fl">活动规则</button>
            <button class="apply fr">我要报名</button>
        </div>
    </div>
<!-- some -->
<!-- image -->
    
<!-- image -->
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/tool.js"></script>
    <script>
        $(function() {
            // })
            // var audio=document.getElementById('music'); 
            // $('.btn-music').click(function(){
            //     if(audio.paused){
            //         $('.btn-music').addClass('btn-ani');
            //         audio.play();
            //         return;
            //     }else{
            //         $('.btn-music').removeClass('btn-ani');
            //         audio.pause(); 
            //     }
            // });
            $('.btn-music').on('click', function() {
                $(this).removeClass('active').siblings().addClass('active');
            });
            $('.apply').on('click', function() {
                $('.register').css('display', 'block');
            });
            $('.c').on('click', function() {
                $('.register').css('display', 'none');
            });
            // $('#submit').on('click', function() {
            //     $('.register').css('display', 'none');
            //     $('.success').css('display', 'block');
            // });
            $('.share').on('click', function() {
                $('.success').css('display', 'none');
                share();
            });
            $('.recommend').on('click', function() {
                share();
            });
            $('.friend').on('click', function() {
                $('.arrow').css('display', 'block');
            });
            $('.space').on('click', function() {
                $('.share-main').css('display', 'none');
                $('.post').css('display', 'block');
            });
            $('.cut').on('click', function() {
                $('.share-main').css('display', 'none');
            });
            $('.del').on('click',function() {
                $('.post').css('display', 'none');
            });
            $('#form').on('submit', function() {
                $('#submit').prop('disabled', true);
                $.post($(this).prop('action'), $(this).serialize(), function(res) {
                    if(res.code == 1) {
                        $('.register').css('display', 'none');
                        $('.success').css('display', 'block');
                        location.reload();
                    }else {
                        alert(res.msg);
                    }
                    $('#submit').prop('disabled', false);
                }).fail(function(e) {
                    alert('服务器繁忙，请稍后再试');
                    $('#submit').prop('disabled', false);
                });
                return false;
            });




            function share() {
                $('.share-main').css('display', 'block');
            }
            

            changeViewTime(500,'#count');
        })
    </script>
  
</body>
</html>